{% extends 'admin/admin_base.html' %}

{% block title %}{{ '编辑' if question else '创建' }}试题 - 后台管理系统{% endblock %}

{% block nav_questions %}active{% endblock %}

{% block content %}
<div class="d-flex justify-content-between align-items-center mb-4">
    <h2>{{ '编辑' if question else '创建' }}试题</h2>
    <a href="{{ url_for('admin.question_list') }}" class="btn btn-secondary">
        <i class="bi bi-arrow-left"></i> 返回列表
    </a>
</div>

<div class="card">
    <div class="card-body">
        <form method="post" class="needs-validation" novalidate>
            <!-- 试题类型选择 -->
            <div class="row mb-4">
                <div class="col-md-4">
                    <label class="form-label fw-bold">选择试题类型</label>
                    <div class="d-flex gap-3">
                        <div class="form-check">
                            <input class="form-check-input" type="radio" name="type" id="typeSingle" 
                                   value="single" {% if not question or question.type == 'single' %}checked{% endif %}
                                   onchange="updateFormFields()">
                            <label class="form-check-label" for="typeSingle">
                                <i class="bi bi-record-circle text-primary"></i> 单选题
                            </label>
                        </div>
                        <div class="form-check">
                            <input class="form-check-input" type="radio" name="type" id="typeMultiple" 
                                   value="multiple" {% if question and question.type == 'multiple' %}checked{% endif %}
                                   onchange="updateFormFields()">
                            <label class="form-check-label" for="typeMultiple">
                                <i class="bi bi-check-square text-success"></i> 多选题
                            </label>
                        </div>
                        <div class="form-check">
                            <input class="form-check-input" type="radio" name="type" id="typeBoolean" 
                                   value="boolean" {% if question and question.type == 'boolean' %}checked{% endif %}
                                   onchange="updateFormFields()">
                            <label class="form-check-label" for="typeBoolean">
                                <i class="bi bi-toggle2-on text-info"></i> 判断题
                            </label>
                        </div>
                    </div>
                </div>
            </div>

            <!-- 题目内容 -->
            <div class="mb-4">
                <label for="title" class="form-label fw-bold">题目内容</label>
                <div class="card">
                    <div class="card-body">
                        <textarea class="form-control border-0" id="title" name="title" 
                                rows="3" required placeholder="请输入题目内容..."
                                style="resize: none;">{{ question.title if question else '' }}</textarea>
                    </div>
                </div>
                <div class="invalid-feedback">
                    请输入题目内容
                </div>
            </div>

            <!-- 选项区域（单选和多选） -->
            <div id="optionsContainer" class="mb-4">
                <label class="form-label fw-bold">选项
                    <small class="text-muted">（请标记正确答案）</small>
                </label>
                <div class="card">
                    <div class="card-body">
                        {% for i in range(4) %}
                        <div class="input-group mb-3">
                            <span class="input-group-text bg-light">{{ chr_function(65 + i) }}</span>
                            <input type="text" class="form-control" name="option_{{ i }}" 
                                   placeholder="请输入选项内容..."
                                   value="{{ question.options[i] if question and question.options|length > i else '' }}"
                                   {% if question and question.type in ['single', 'multiple'] %}required{% endif %}>
                            <div class="input-group-text bg-light">
                                <input class="form-check-input m-0 {{ 'form-check-input' if question and question.type == 'multiple' else '' }}" 
                                       type="{{ 'checkbox' if question and question.type == 'multiple' else 'radio' }}"
                                       name="{{ 'correct_answer_' + i|string if question and question.type == 'multiple' else 'correct_answer' }}"
                                       value="{{ i }}"
                                       {% if question and i in question.correct_answers %}checked{% endif %}>
                            </div>
                        </div>
                        {% endfor %}
                    </div>
                </div>
            </div>

            <!-- 判断题答案 -->
            <div id="booleanContainer" class="mb-4" style="display: none;">
                <label class="form-label fw-bold">正确答案</label>
                <div class="card">
                    <div class="card-body">
                        <div class="btn-group w-100" role="group">
                            <input type="radio" class="btn-check" name="correct_answer" id="answerTrue" 
                                   value="true" {% if question and question.correct_answers[0] %}checked{% endif %}>
                            <label class="btn btn-outline-success" for="answerTrue">
                                <i class="bi bi-check-lg"></i> 正确
                            </label>

                            <input type="radio" class="btn-check" name="correct_answer" id="answerFalse" 
                                   value="false" {% if question and not question.correct_answers[0] %}checked{% endif %}>
                            <label class="btn btn-outline-danger" for="answerFalse">
                                <i class="bi bi-x-lg"></i> 错误
                            </label>
                        </div>
                    </div>
                </div>
            </div>

            <!-- 提交按钮 -->
            <div class="text-end">
                <button type="submit" class="btn btn-primary">
                    <i class="bi bi-save"></i> 保存试题
                </button>
            </div>
        </form>
    </div>
</div>
{% endblock %}

{% block extra_js %}
<script>
// 表单验证
(function () {
    'use strict'
    var forms = document.querySelectorAll('.needs-validation')
    Array.prototype.slice.call(forms).forEach(function (form) {
        form.addEventListener('submit', function (event) {
            if (!form.checkValidity()) {
                event.preventDefault()
                event.stopPropagation()
            }
            form.classList.add('was-validated')
        }, false)
    })
})()

// 根据试题类型更新表单字段
function updateFormFields() {
    const type = document.querySelector('input[name="type"]:checked').value;
    const optionsContainer = document.getElementById('optionsContainer');
    const booleanContainer = document.getElementById('booleanContainer');
    
    if (type === 'boolean') {
        optionsContainer.style.display = 'none';
        booleanContainer.style.display = 'block';
        // 移除选项的必填属性
        optionsContainer.querySelectorAll('input[type="text"]').forEach(input => {
            input.required = false;
        });
    } else {
        optionsContainer.style.display = 'block';
        booleanContainer.style.display = 'none';
        // 添加选项的必填属性
        optionsContainer.querySelectorAll('input[type="text"]').forEach(input => {
            input.required = true;
        });
        
        // 更新单选/多选按钮
        const answerInputs = optionsContainer.querySelectorAll('.input-group-text input');
        answerInputs.forEach(input => {
            if (type === 'multiple') {
                input.type = 'checkbox';
                input.classList.add('form-check-input');
                const index = input.value;
                input.name = 'correct_answer_' + index;
            } else {
                input.type = 'radio';
                input.classList.remove('form-check-input');
                input.name = 'correct_answer';
            }
        });
    }
}

// 页面加载时初始化表单
document.addEventListener('DOMContentLoaded', function() {
    updateFormFields();
});
</script>
{% endblock %}
